<template>
  <!-- 添加 -->
<div class="root">
  
  <div class="tianjia">

    <el-form ref="formRef" :model="numberValidateForm" label-width="100px" class="demo-ruleForm">

      <el-form-item label="标题:" prop="title" :rules="[
        { required: true, message: '请输入标题' },
        { type: 'string', message: '请输入标题' },
      ]">
        <el-input v-model="numberValidateForm.title" placeholder="请输入标题" type="text"
          autocomplete="off" />
      </el-form-item>

      <el-form-item label="关键字:" prop="keywords" :rules="[
        { required: true, message: '请输入关键字' },
        { type: 'string', message: '请输入关键字' },
      ]">
        <el-input v-model="numberValidateForm.keywords" placeholder="请输入关键字" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="作者:" prop="author" :rules="[
        { required: true, message: '请输入作者' },
        { type: 'string', message: '请输入作者' },
      ]">
        <el-input v-model="numberValidateForm.author" placeholder="请输入作者" type="text" autocomplete="off" />
      </el-form-item>

      <el-form-item label="介绍" prop="title">
        <el-input v-model="numberValidateForm.content" :rows="2" type="textarea" placeholder="请输入正文" />
      </el-form-item>


      <!-- 图片上传 -->
      <el-form-item label="缩略图">
        <el-upload
          class="avatar-uploader"
          action="http://121.42.230.80/api/mini/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button @click="quxiao">取消</el-button>
        <el-button type="primary" @click="gitAdd">确定</el-button>
      </el-form-item>

    </el-form>

  </div>

</div>

</template>

<script setup lang='ts'>
  import {ref,reactive} from 'vue'
  import type { FormInstance } from 'element-plus'
  import router from '../../router/router'
  import { ElMessage } from "element-plus";
  import {addition} from '../../api/login/index' //接口
  import type { UploadProps } from 'element-plus';  //图片上传


  const formRef = ref<FormInstance>()


// 上传图片
const imageUrl = ref('');
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  // console.log(  response,uploadFile);
  
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);  //临时路径

  numberValidateForm.thumb = response //图片赋值           //真实路径
};

// 图片验证
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('头像图片必须是 JPG 格式!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过 2MB!');
    return false;
  }
  return true;
};


// 点击取消 清空表单数据
let quxiao =() =>{
  window.location.reload()
}

// 点击添加
const numberValidateForm = reactive({ //参数
  title: '',//标题
  content: '',// 正文
  keywords: '', //关键字
  thumb:'',   //图
  author: ''  //作者
})
let gitAdd = async () =>{   //接口
  let res:any = await addition(numberValidateForm)
  console.log(res);
  if(res.code==='00000'){
    ElMessage({
      message: "添加成功",
      type: "success",
    });
    router.push('school')
  }
}


</script>

<style scoped lang='less'>
  .tianjia{
    width: 300px;
  }

  // 图片
  :deep(.el-upload){
    border:1px dashed #8c939d;
    border-radius: 8px;
  }
  .avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>